/* Media viewer */

    /* Common styles */

        .media-viewer-container {
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            transition: 200ms linear;
        }
        .media-viewer {
            background: var(--surface-black);
            display: flex;
            flex-direction: column;
            height: 100%;
            margin: 0 auto;
            text-align: center;
        }
        .media-viewer header,
        .media-viewer footer {
            display: flex;
            flex: 0 0 auto;
            flex-direction: column;
            position: relative;
        }
        .media-viewer .viewer-rounded {
            position: absolute;
            top: 24px;
            right: 24px;
            background: var(--surface-black-bar);
            border: 2px solid var(--stroke-black);
            border-width: 0 0 2px;
            border-radius: 50%;
            transition: var(--transition-all);
        }
        .media-viewer .viewer-bars.image-controls {
            bottom: 0;
        }

    /* Header */

        .media-viewer .file-info {
            flex: 1 1 auto;
            overflow: hidden;
            text-align: center;
        }
        .media-viewer .file-name {
            color: var(--text-color-higher);
            font: var(--text-h3);
            overflow: hidden;
            padding: 2px 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .media-viewer .counter {
            background: var(--surface-main);
            border-radius: 12px;
            color: var(--text-color-higher);
            display: inline-flex;
            font: var(--text-body1);
            padding: 2px 12px;
        }

    /* Content */

        .media-viewer .content {
            display: flex;
            flex: 1 1 auto;
            justify-content: center;
            overflow: hidden;
            position: relative;
            height: 100%;
        }
        .media-viewer button.gallery-btn {
            border-radius: 4px;
            left: 0;
            margin: -30px 24px 0;
            padding: 5px 0;
            position: fixed;
            top: 50%;
            transition: var(--transition-all);
            z-index: 10;
        }
        .media-viewer button.gallery-btn:hover {
            --mask-color: var(--icon-rest);
        }
        .media-viewer button.gallery-btn:has(.icon-arrow-right-regular-outline),
        .media-viewer button.gallery-btn:has(.icon-arrow-left-regular-outline) {
            border-radius: 100%;
            padding: 4px;
            --mask-color: var(--icon-rest);
            background: var(--surface-grey-6);
            top: calc(50% + 12px);
        }
        .media-viewer button.gallery-btn.next {
            left: auto;
            right: 0;
        }
        .media-viewer button.gallery-btn i {
            --icon-size: 48px;
            transition: var(--transition-bg-color);
        }
        .media-viewer button.gallery-btn i.icon-arrow-right-regular-outline,
        .media-viewer button.gallery-btn i.icon-arrow-left-regular-outline {
            --icon-size: 24px;
        }

    /* Images viewer */

        /*Images viewer  content */

            .media-viewer .img-wrap {
                overflow: hidden;
                position: relative;
                width: 100%;
            }
            .media-viewer .img-wrap.picked {
                cursor: move;
            }
            .media-viewer .img-wrap img,
            .media-viewer .img-wrap img[src=""].active {
                background: var(--image-background);
                opacity: 0;
                position: absolute;
                -webkit-transition: opacity 10ms ease-in-out;
                transition: opacity 10ms ease-in-out;
            }
            .media-viewer .img-wrap img.broken-eye,
            .media-viewer .img-wrap img.broken-eye[src=""].active {
                background: none;
            }
            .slideshow .media-viewer .content img {
                -webkit-transition: opacity 900ms ease-in-out;
                transition: opacity 900ms ease-in-out;
            }
            .media-viewer .content img.active,
            .slideshow .media-viewer .content img.active {
                opacity: 1;
            }

            .media-viewer .content embed,
            .media-viewer .content iframe {
                border: 0;
                height: auto;
                width: 100%;
            }

            #fmholder #pdfpreviewdiv1 {
                margin: 62px 0 60px;
            }

            #fmholder #docxpreviewdiv1 {
                margin-top: 62px;
            }

        /* Images viewer controls */

            .media-viewer .image-controls {
                border-width: 2px 0 0;
            }
            .media-viewer .image-controls .bar {
                padding: 3px 0;
            }
            .media-viewer .zoom-slider-wrap {
                align-items: center;
                display: flex;
                flex: 1 1 auto;
                justify-content: center;
            }
            .media-viewer .ui-slider.ui-widget-content {
                background: var(--progress-bar-background);
                border-radius: 2px;
                height: 4px;
                margin: 0;
                width: 120px;
            }
            .media-viewer .ui-slider .ui-slider-handle {
                background: var(--surface-main-inverted);
                background-clip: padding-box;
                border: 1px solid var(--switch-handle-border);
                border-radius: 100%;
                box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
                box-sizing: content-box;
                height: 16px;
                margin: 0;
                margin-inline-start: -8px;
                top: -7px;
                width: 16px;
                position: relative;
            }
            .media-viewer .ui-slider .ui-slider-range {
                background: var(--surface-main-inverted);
                height: 100%;
                opacity: 0.5;
            }
            .media-viewer .ui-slider .ui-slider-handle .mv-zoom-slider,
            .media-viewer .ui-slider .ui-slider-handle .mv-zoom-slider-arrow {
                position: absolute;
                top: -49px;
                left: 50%;
                transform: translateX(-50%);
                display: block;
                opacity: 0;
                transition: opacity 300ms ease-in-out;
                --mask-color: var(--surface-grey-1-inverted);
                --icon-size: 24px;
            }
            .media-viewer .ui-slider .ui-slider-handle .mv-zoom-slider-arrow {
                top: -21px;
            }
            .media-viewer .ui-slider .ui-slider-handle:hover .mv-zoom-slider,
            .media-viewer .ui-slider .ui-slider-handle:active .mv-zoom-slider,
            .media-viewer .ui-slider .ui-slider-handle:hover .mv-zoom-slider-arrow,
            .media-viewer .ui-slider .ui-slider-handle:active .mv-zoom-slider-arrow {
                display: block;
                opacity: 1;
            }

        /* Slideshow controls */

            .slideshow .media-viewer .viewer-bars.slideshow-controls {
                background: var(--surface-black-bar);
                border: 0;
                border-radius: 32px;
                bottom: 100%;
                left: 50%;
                margin-bottom: 16px;
                padding: 16px;
                position: absolute;
                width: auto;
                z-index: 10;
                transform: translateX(-50%);
            }
            .media-viewer .slideshow-controls button {
                display: inline-flex;
                margin: 0 6px;
                padding: 0;
            }
            .media-viewer .slideshow-controls button i {
                height: 32px;
                width: 32px;
                --icon-size: 32px;
            }
            .media-viewer .slideshow-controls .bar {
                display: inline-flex;
                flex: auto;
                padding: 0 10px;
            }
            .media-viewer .slideshow-controls-upper button {
                height: 64px;
                width: 64px;
            }
            .media-viewer .slideshow-controls-upper button i {
                height: 32px;
                width: 32px;
                --icon-size: 32px;
            }

            .media-viewer .context-menu.slideshow-context-settings {
                top: -144px;
                min-width: 240px;
                position: absolute;
                left: 190px;
            }

            .context-menu.slideshow-context-settings button i {
                height: 24px;
                width: 24px;
                --icon-size: 24px;
            }

            .context-menu.slideshow-context-settings button.disabled i::before {
                color: var(--text-color-medium);
            }

            .context-menu.slideshow-context-settings li {
                padding: 2px 8px;
            }

            .context-menu.slideshow-context-settings button {
                padding: 1px 6px;
                margin: 0 0 2px;
                font-style: normal;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
            }

            .context-menu.slideshow-context-settings button.active {
                color: var(--text-color-white-high);
            }

            .context-menu.slideshow-context-settings span.title {
                font-weight: 700;
                font-size: 14px;
                line-height: 24px;
                color: var(--text-color-white-high);
            }

            .context-menu.slideshow-context-settings button.disabled:hover {
                cursor: auto;
                background-color: var(--surface-main);
            }

            .context-menu.slideshow-context-settings button span.current {
                width: 32px;
                color: var(--text-color-medium);
                text-align: center;
            }

            .context-menu.slideshow-context-settings button.icon-arrow-right-after::after {
                height: 16px;
                width: 16px;
                margin-left: 10px;
            }

            .context-menu.slideshow-context-settings li .message {
                padding: 1px 6px;
                height: 100%;
                width: 90%;
                text-align: start;
                font-style: normal;
                font-weight: 700;
                font-size: 12px;
                line-height: 24px;
                color: var(--text-color-medium);
            }

            .context-menu.slideshow-context-settings li .switch-option {
                box-sizing: border-box;
                align-items: center;
                min-height: 32px;
                text-align: start;
                width: 100%;
                padding: 1px 6px;
                margin: 0 0 2px;
                display: inline-flex;
            }

            .context-menu.slideshow-context-settings li.disabled .switch-option .mega-switch,
            .context-menu.slideshow-context-settings li.disabled .switch-option .mega-switch .mega-feature-switch {
                cursor: auto;
            }

            .context-menu.slideshow-context-settings li .switch-option span {
                width: calc(100% - 48px);
            }

            .context-menu.slideshow-context-settings li:last-child .message {
                margin-top: 8px;
                height: 30px;
                overflow: hidden;
            }


    /* On mouse idle */

        .mouse-idle.fullscreen:not(.context-menu-open) .viewer-bars,
        .mouse-idle.video-theatre-mode .viewer-bars,
        .mouse-idle:not(.context-menu-open) .viewer-bars.slideshow-controls,
        .mouse-idle:not(.context-menu-open) .viewer-rounded.slideshow-controls-upper,
        .mouse-idle.fullscreen .media-viewer .gallery-btn,
        .mouse-idle.video .media-viewer .gallery-btn {
            opacity: 0;
            visibility: hidden;
        }
        .vad.mouse-idle .video-progress-bar.vad,
        .mouse-idle .vad .video-progress-bar.vad {
            opacity: 1;
            visibility: visible;
        }
        .mouse-idle {
            cursor: none !important;
        }
        .vad.mouse-idle .viewer-vad-control,
        .vad.mouse-idle .viewer-vad-info {
            bottom: 16px;
        }

    /* Errors */

        .viewer-error-header {
            color: var(--text-color-high);
            font: var(--text-h2);
        }
        .viewer-error-txt {
            color: var(--text-color-high);
            padding: 40px;
        }
        .viewer-error-button {
            white-space: nowrap;
        }
        .viewer-error-buttons div {
            color: var(--text-color-high);
            display: inline-block;
            font-size: 14px;
            line-height: 28px;
            margin: 0 16px;
        }

    /* Progress bar */

        .viewer-progress {
            background: var(--surface-black);
            border-radius: 100%;
            bottom: 14px;
            height: 36px;
            overflow: hidden;
            position: absolute;
            right: 14px;
            transition: var(--transition-all);
            visibility: visible;
            width: 36px;
            z-index: 10;
        }
        .viewer-progress ul {
            background: var(--progress-bar-background);
            height: 100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
            position: relative;
            width: 100%;
        }
        .viewer-progress ul::after {
            background: var(--surface-grey-1);
            border-radius: 100%;
            content: '';
            display: block;
            height: 28px;
            left: 4px;
            overflow: hidden;
            position: absolute;
            top: 4px;
            width: 28px;
        }
        .viewer-progress ul li {
            height: 36px;
            margin: 0;
            padding: 0;
            position: absolute;
            width: 36px;
        }
        .viewer-progress .right-c {
            clip: rect(0, 36px, 36px, 18px);
        }
        .viewer-progress .left-c {
            clip: rect(0, 18px, 36px, 0);
        }
        .viewer-progress p {
            height: 36px;
            margin: 0;
            width: 36px;
        }
        .viewer-progress span {
            background: var(--progress-bar-background);
            display: block;
            height: 36px;
            width: 18px;
        }
        .viewer-progress .right-c span {
            border-radius: 18px 0 0 18px;
        }
        .viewer-progress .left-c span {
            border-radius: 0 18px 18px 0;
            margin-left: 18px;
        }

    /* Rotation fixes */

        .exif-rotation-2 {
            transform: rotateY(180deg);
        }
        .exif-rotation-3 {
            transform: rotate(180deg);
        }
        .exif-rotation-4 {
            transform: rotate(180deg) rotateY(180deg);
        }
        .exif-rotation-5 {
            transform: rotate(270deg) rotateY(180deg);
            transform-origin: top left;
        }
        .exif-rotation-6 {
            transform: translateY(-100%) rotate(90deg);
            transform-origin: bottom left;
        }
        .exif-rotation-7 {
            transform: translateY(-100%) translateX(-100%) rotate(90deg) rotateY(180deg);
            transform-origin: bottom right;
        }
        .exif-rotation-8 {
            transform: translateX(-100%) rotate(270deg);
            transform-origin: top right;
        }
